<template>
  <a-card>
    <a-form :label-col="{span:2}">
      <a-form-item :colon="false" label="标题">
        <a-input v-model:value="titleValue"/>
      </a-form-item>
      <a-form-item :colon="false" label="内容">
        <QuillEditor v-model:content="content" ref="editor" contentType="html" theme="snow" :options="editorOption"/>
      </a-form-item>
      <a-form-item :colon="false" label=" ">
        <a-button @click="submitForm" type="primary" style="margin-right: 15px">立即提交</a-button>
        <a-button @click="resetContent">重置</a-button>
      </a-form-item>
    </a-form>
  </a-card>
</template>

<script>
import {QuillEditor} from '@vueup/vue-quill'
import '@vueup/vue-quill/dist/vue-quill.snow.css';
import {fetchDocumentList, updateDocument} from '@/api/finance'
import {message} from 'ant-design-vue'
export default {
  name: "WordAnalysis",
  components: {
    QuillEditor
  },
  data() {
    return {
      titleValue: '',
      content: '', //富文本的内容
      contentId: null,
      editorOption: {
        width: '100%',
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike"], // 加粗 斜体 下划线 删除线
            ["blockquote", "code-block"], // 引用  代码块
            [{header: 1}, {header: 2}], // 1、2 级标题
            [{list: "ordered"}, {list: "bullet"}], // 有序、无序列表
            [{script: "sub"}, {script: "super"}], // 上标/下标
            [{indent: "-1"}, {indent: "+1"}], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            [{size: ["small", false, "large", "huge"]}], // 字体大小
            [{header: [1, 2, 3, 4, 5, 6, false]}], // 标题
            [{color: []}, {background: []}], // 字体颜色、字体背景颜色
            [{font: []}], // 字体种类
            [{align: []}], // 对齐方式
            ["clean"], // 清除文本格式
          ]
        },
        theme: 'snow'
      },
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await fetchDocumentList()
      console.log(res)
      if (res.code === 200) {
        const {content, title, id} = res.data
        this.titleValue = title
        this.content = content
        this.contentId = id
        this.$refs.editor.setHTML(content);
        console.log(this.content)
      }
    },
    async submitForm() {
      const res = await updateDocument({
        content: this.content,
        title: this.titleValue,
        id: this.contentId
      })
      console.log(res)
      if (res.code === 200) {
        message.success('修改成功')
        this.getList()
      }
    },
    resetContent() {
      this.titleValue = ''
      this.content = ''
      this.$refs.editor.setHTML('')
    }
  }
}
</script>

<style scoped>

</style>
